<template slot-scope="scope">
  <div class="login_container">
    <el-row>
      <!-- 12代表宽度为12份,24代表宽度为24份,xs代表屏幕宽度小于640px时,该列宽度为24份,sm代表屏幕宽度大于640px时,该列宽度为12份 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginFormRef">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"
              show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loadding" class="login_btn" type="primary" size="default" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { getTime } from '@/utils/time';

//收集账号与密码的数据
let loginForm = reactive({ username: 'admin', password: '111111' });
let userStore = useUserStore();
let router = useRouter();
let loadding = ref(false);
// 获取elm 的表单组件实例
let loginFormRef = ref();

// 登录
const login = async () => {
  // 校验表单,成功才发送请求
  await loginFormRef.value.validate()
  loadding.value = true;
  // 发送登录请求
  // 请求成功-->跳转首页
  // 请求失败-->提示错误信息  
  await userStore.userLogin(loginForm).then(() => {
    // 跳转首页
    router.push('/')
    // 提示登录成功
    ElNotification({
      title: `${getTime()}好，欢迎回来！`,
      message: '欢迎来到硅谷甄选',
      type: 'success',
    })
    loadding.value = false;
  }).catch((err) => {
    loadding.value = false;
    // 提示错误信息
    ElNotification({
      title: '登录失败',
      message: err.message,
      type: 'error',
    })
  })
}

// 自定义校验规则
// const validateUser = (rule: any, value: any, callback: any) => {
//   if (value === 'admin') { // 校验规则
//     callback(new Error('用户名不能为admin'));
//   } else {
//     callback();
//   }
// }

// 表单校验规则
const rules = {
  // 校验规则
  // required: true 表示该字段是必填的
  // message: 表示该字段不符合正则表达式时的提示信息
  // trigger: 'blur' 表示该字段失去焦点时触发校验,change表示该字段的值发生变化时触发校验
  // type: 'error' 表示该字段不符合正则表达式时的提示信息的类型,error表示错误信息,success表示成功信息,warning表示警告信息,info表示信息
  // min: 3 表示该字段的最小长度为3
  // max: 5 表示该字段的最大长度为5
  // pattern: 正则校验规则
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
    // 自定义校验规则
    // { validator: validateUser, trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
    // { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/, message: '密码必须是6-12位字母和数字的组合', trigger: 'blur' }
  ],
}

</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url('@/assets/images/login_form.png');
  background-size: cover;
  padding: 40px;

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 0;
  }

  .login_btn {
    width: 100%;
  }
}
</style>
